<!DOCTYPE html>
<html lang="en">
<head>
    <title>Clock</title>
    <link rel="stylesheet" type="text/css" href="./clock.css">
</head>
<body>
    
    <canvas id="canvas" width="800" height="600"></canvas>

    <script type="text/javascript">
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext("2d");
    
    renderClock = function(){
    	ctx.clearRect(0, 0, 800, 600);
    	let time = new Date();
        let hour = time.getHours();
        let minite = time.getMinutes();
        let second = time.getSeconds();
        hour = hour > 12 ? hour - 12 : hour;
        
       	console.log(hour + ":" + minite + ":" + second);
    
        let hour_num = 1

        ctx.save();
        ctx.translate(400, 300);
        ctx.save();
        
        // 画圆盘
        ctx.beginPath();
        ctx.arc(0, 0, 200, 0, 2 * Math.PI);
        ctx.strokeStyle = "darkgrey"
        ctx.lineWidth = 8;
        ctx.stroke();
        ctx.closePath();
        
        // 先绘制分针与秒针刻度
        for(let i = 0; i < 60; i ++){
        	ctx.rotate(2 * Math.PI / 60);
        	ctx.beginPath();
        	ctx.moveTo(170, 0);
        	ctx.lineTo(190, 0);
        	ctx.strokeStyle = "lightgrey";
        	ctx.lineWidth = 4;
        	ctx.stroke();
        	ctx.closePath();
        }
        
        
        ctx.restore();
        ctx.save();
        
        // 后绘制时针刻度，把秒针与分针刻度盖起来
        for(let j = 0; j < 12; j ++){
        	ctx.rotate(2 * Math.PI / 12);
        	ctx.beginPath();
        	ctx.moveTo(160, 0);
	        ctx.lineTo(190, 0);
	        ctx.strokeStyle = "darkgray"
	        ctx.lineWidth = 8;
	        ctx.stroke();
	        ctx.closePath();
        }
        
        ctx.restore();
        // 调整竖轴向上为x正，横轴向右为y正
        ctx.rotate(-2 * Math.PI / 4);
        ctx.save();
        
        
        
        ctx.rotate(2 * Math.PI / 4);
        ctx.translate(-8.5, 4.5)
        ctx.save();
        const every = 2*Math.PI / 12;
        let arr=[5,4,3,2,1,12,11,10,9,8,7,6];
        
        // 描绘数字
        for(let k = 1; k <= 12; k ++){
        	ctx.font ='20px STHeiti, SimHei';
        	ctx.lineWidth = 1;
        	ctx.strokeStyle = "darkgrey";
        	ctx.strokeText(arr[k-1].toString(), 145*Math.sin(k*every), 145*Math.cos(k*every));
        }
        ctx.restore();
        
        // 返回了竖轴向上为x正，横轴向右为y正
        ctx.restore();
        ctx.save();
        
        // 画秒针
        ctx.beginPath();
        ctx.rotate(2 * Math.PI / 60 * second);
        ctx.moveTo(-20, 0);
        ctx.lineTo(130, 0);
        ctx.strokeStyle = "orangered"
        ctx.lineWidth = 3;
        ctx.stroke();
        ctx.closePath();
        
       	ctx.restore();
        ctx.save();
        
        // 画分针
        ctx.beginPath();
        ctx.rotate(2*Math.PI/60*minite + 2*Math.PI/3600*second);
        ctx.moveTo(-15, 0);
        ctx.lineTo(120, 0);
        ctx.strokeStyle = "lightgrey";
        ctx.lineWidth = 5;
        ctx.stroke();
        ctx.closePath();
        
        ctx.restore();
        ctx.save();
        
        // 画时针
        ctx.beginPath();
        ctx.rotate(2*Math.PI/12*hour + 2*Math.PI/12/60*minite + 2*Math.PI/3600/12*second);
        ctx.moveTo(-10, 0);
        ctx.lineTo(90, 0);
        ctx.strokeStyle = "darkgrey";
        ctx.lineWidth = 7;
        ctx.stroke();
        ctx.closePath();
        
        // 恢复最初的样子
        ctx.restore();
        ctx.restore();
    }
    	
    setInterval(function(){
    	renderClock()
    }, 1000);
        
    </script>
</body>
</html>